import React, { useEffect, useState, useRef } from 'react';
import { Breadcrumb, Button, message, Switch, Table } from 'antd';
import pub from '@/css/Tom/pub.less';
import all from '@/css/Tom/all_store.less';
import '../../css/Tom/none.less';

import { instance } from '../../../api/request';

import Alert from '@/componts/jcomponts/Alert';

function AllStore(props: any) {
  const { name, path } = props.route;
  const childRef: any = useRef();
  let isCheck = false;
  const columns = [
    {
      title: 'ID',
      width: 100,
      dataIndex: 'id',
      key: 'id',
      fixed: 'left',
    },
    { title: '门店名称', dataIndex: 'mname', key: '1' },
    { title: '门店店长', dataIndex: 'shop_owner', key: '2' },
    { title: '在售商品', dataIndex: 'sale_number', key: '3' },
    { title: '消售额', dataIndex: 'sale_price', key: '4' },
    { title: '是否支持自提', dataIndex: 'take', key: '5' },
    {
      title: '类型',
      dataIndex: 'static',
      key: '6',
      render: (sta: number) => <div>{sta === 1 ? '微信' : '支付宝'} </div>,
    },
    {
      title: '状态',
      key: 'type',
      fixed: 'right',
      width: 100,
      dataIndex: 'type',
      render: (state: boolean, e: Object, index: Number) => (
        <Switch
          defaultChecked={e.type == '1'}
          onClick={() => isStatefun(state, e, index)}
        />
      ),
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (e: any) => (
        <div className={all.ico}>
          <svg
            onClick={() => change(e)}
            t="1629375266707"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1931"
            width="20"
            height="20"
          >
            <path
              d="M98 607.49v132.16h130.42l391.27-396.46-130.42-132.15L98 607.49z m619.5-429.5l-65.21-66.07c-18-18.24-47.2-18.24-65.2 0l-32.6 33.04 130.42 132.15 32.61-33.05c8.65-8.76 13.5-20.65 13.5-33.04-0.01-12.38-4.87-24.27-13.52-33.03zM98 833.1h830v93.44H98V833.1z m0 0"
              p-id="1932"
              fill="#69AAFF"
            ></path>
          </svg>
          <svg
            onClick={() => del(e)}
            t="1629374772327"
            className="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8483"
            width="20"
            height="20"
          >
            <path
              d="M519.620465 0c-103.924093 0-188.511256 82.467721-192.083349 185.820279H85.015814A48.91386 48.91386 0 0 0 36.101953 234.686512a48.91386 48.91386 0 0 0 48.913861 48.866232h54.010046V831.345116c0 102.852465 69.822512 186.844279 155.909954 186.844279h439.200744c86.087442 0 155.909953-83.491721 155.909954-186.844279V284.100465h48.91386a48.91386 48.91386 0 0 0 48.913861-48.890046 48.91386 48.91386 0 0 0-48.913861-48.866233h-227.756651A191.559442 191.559442 0 0 0 519.620465 0z m-107.234232 177.080558c3.548279-49.771163 46.627721-88.540279 99.851907-88.540279 53.224186 0 96.327442 38.745302 99.351813 88.540279h-199.20372z m-111.997024 752.044651c-30.981953 0-65.083535-39.15014-65.083535-95.041488V287.744h575.488v546.839814c0 55.915163-34.077767 95.041488-65.059721 95.041488H300.389209v-0.500093z"
              fill="#D79087"
              p-id="8484"
            ></path>
            <path
              d="M368.116093 796.814884c24.361674 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.908465-48.818605-44.27014-48.818604-24.33786 0-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.293954 48.818605z m154.933581 0c24.361674 0 44.293953-21.670698 44.293954-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.293954-48.818604-24.33786 0-44.27014 21.670698-44.270139 48.818604v278.623256c0 27.147907 19.932279 48.818605 44.293953 48.818605z m132.810419 0c24.33786 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.27014-48.818604s-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.27014 48.818605z"
              fill="#D79087"
              p-id="8485"
            ></path>
          </svg>
        </div>
      ),
    },
  ];
  const [data, setdata] = useState([]);
  const [len, setlen] = useState(0);
  const [disabled, set_disabled] = useState(false);
  const [pag, setpag] = useState(1);
  const [store_id, set_store_id] = useState(null);
  const [mes, setmes] = useState('门店新增');
  useEffect(() => {
    instance.get('/store?pag=1').then((e) => {
      let arr: any = [];
      setlen(e.data.length);
      console.log(e.data.data);
      e.data.data.forEach((e: any) => {
        if (e.yes) {
          e.shop_owner = e.yes.tname;
        }
        e.key = e.id + 'lis';

        arr.push(e);
      });
      setdata(arr);
    });
  }, []);
  const rot = [
    { name: '首页', path: '/' },
    { name: name, path: path },
  ];

  function change(e: object) {
    childRef.current.showModal(e.id);
  }

  //删除元素
  function del(e: Object) {
    instance
      .delete('/store/delete', {
        data: { id: e.id },
      })
      .then((e) => {
        if (e.code === 200) {
          instance.get('/store?pag=1').then((e) => {
            let arr: any = [];
            setlen(e.data.length);
            e.data.data.forEach((e: any) => {
              e.key = e.id + 'lis';
              arr.push(e);
            });
            setdata(arr);
          });
          setpag(1);
        } else {
          message.error(`删除失败  ${e.mes}`);
        }
        console.log(e);
      });
  }

  //状态选择
  function isStatefun(state: boolean, e: Object, index: Number) {
    let a = data;
    a[index].type = !e.type == '0' ? '0' : '1';
    setdata(a);
    console.log(e.type);
    instance
      .put('/store/put', {
        id: e.id,
        type: e.type,
      })
      .then((e) => {
        if (e.code === 200) {
          instance.get('/store?pag=1').then((e) => {
            let arr: any = [];
            setlen(e.data.length);
            e.data.data.forEach((e: any) => {
              e.key = e.id + 'lis';
              arr.push(e);
            });
            setdata(arr);
          });
        } else {
          message.error(`修改  ${e.mes}`);
        }
      });
  }

  function showModal() {
    childRef.current.showModal('新增');
  }

  // @ts-ignore
  // @ts-ignore
  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <Button type="primary" size="small" onClick={showModal}>
        新增
      </Button>
      <Alert childRef={childRef} key="qwe" shows="1" title={mes}>
        新增
      </Alert>
      <Table
        pagination={{
          total: len,
          defaultPageSize: 5,
          disabled: false,
          showLessItems: true,
          current: pag,
          onChange(e) {
            console.log(e);
            setpag(e);
            instance.get(`/store?pag=${e}`).then((e) => {
              let arr: any = [];
              setlen(e.data.length);
              e.data.data.forEach((e: any) => {
                e.key = e.id + 'lis';
                if (e.yes) {
                  e.shop_owner = e.yes.tname;
                }
                arr.push(e);
              });
              setdata(arr);
            });
          },
        }}
        columns={columns}
        dataSource={data}
        scroll={{ x: 1300 }}
      />
    </div>
  );
}

export default AllStore;
